<template>
  <div class="register-page">
    <!-- 顶部导航栏 -->
    <NavBar navbarTitle="注册"></NavBar>
    <!-- 页面主体内容区 -->
    <div class="page-content">
      <div class="content-logo">
        <img class="logo-img" src="/src/assets/images/logo/XCJSLogo3.png" alt="">
      </div>
      <!-- 登录表单区域 -->
      <div class="content-form">
        <div class="form-item">
          <div class="item-icon">
            <SvgIcon name="user" width="1.2em" height="1em" color="#c8c9cc"></SvgIcon>
          </div>
          <input class="item-input" type="text" placeholder="请输入用户名" v-model="registerForm.username">
        </div>
        <div class="form-item">
          <div class="item-icon">
            <SvgIcon name="phone" width="1.2em" height="1.2em" color="#c8c9cc"></SvgIcon>
          </div>
          <input class="item-input" type="text" placeholder="请输入手机号" v-model="registerForm.phone">
        </div>
        <div class="form-item">
          <div class="item-icon" @click="showOrHiddenPwd">
            <SvgIcon :name="showPwd ? 'eye-o' : 'eye-c' " width="1.1em" height="1.1em" color="#c8c9cc"></SvgIcon>
          </div>
          <input class="item-input" :type="showPwd ? 'text' : 'password'" placeholder="请输入密码" v-model="registerForm.password">
        </div>
        <div class="form-item">
          <div class="item-icon">
            <SvgIcon name="repassword" width="1em" height="1em" color="#c8c9cc"></SvgIcon>
          </div>
          <input class="item-input" type="password" placeholder="确认密码" v-model="registerForm.repassword">
        </div>
        <div class="form-item captcha-code">
          <div class="item-icon">
            <SvgIcon name="verificationCode" width="1.1em" height="1.1em" color="#c8c9cc"></SvgIcon>
          </div>
          <input class="item-input" type="text" placeholder="请输入验证码" v-model="registerForm.captcheImgCode">
          <!-- 验证码图片 -->
          <img class="item-captcha-code" :src="registerForm.imageBase64Url" @click="changeCaptcheImg" alt="验证码" title="验证码">
        </div>
      </div>
      <!-- 用户协议及登录按钮区域 -->
      <div class="content-login">
        <div class="login-btn">
          <van-button class="btn-item" type="primary" @click="register_btn">注册</van-button>
        </div>
        <div class="login-agreement">
          <van-checkbox v-model="isAggree"><span class="agreement-tip">您已阅读并同意</span><span class="agreement-text">《星辰集市用户服务协议》《隐私权政策》《软件许可使用协议》</span></van-checkbox>
        </div>        
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar/NavBar.vue';
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue';
//引入vant组件
import { Checkbox as VanCheckbox, Button as VanButton, showToast, showSuccessToast } from "vant";
//引入vue
import { ref, reactive, onMounted } from "vue";
//引入vue-router
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
//@ts-ignore引入请求api
import { reqCaptchaImgCode } from "@/api/login/index.ts";
import { reqSaveUser } from "@/api/user/index";

//注册表单项收集信息
const registerForm = reactive({
  imageBase64Url:"",
  username:"",
  nickname:"",
  phone:"",
  password:"",
  repassword:"",
  captcheImgCode:""
})
//用户是否同意使用须知
let isAggree = ref(false);
//展示svg图标 眼睛开|眼睛闭
let showPwd = ref(false);

//显示或者隐藏密码事件
function showOrHiddenPwd () {
  showPwd.value = !showPwd.value;
}

//点击注册,新增会员用户
async function register_btn () {
  //是否勾选了使用须知
  if(!isAggree.value) return showToast("请勾选用户同意须知!");
  //准备参数
  let paramsObj = {username:registerForm.username,phone:registerForm.phone,password:registerForm.password};
  //对参数进行校验
  if(paramsObj.username.trim() === '') return showToast("用户名不能为空!");
  if(paramsObj.phone.length !== 11 || isNaN(Number(paramsObj.phone))) return showToast("手机号格式错误!");
  if(paramsObj.password.trim().length < 6) return showToast("密码不能少于六位!");
  if(paramsObj.password !== registerForm.repassword) return showToast("两次输入的密码不一致,请重新输入!");
  if(registerForm.captcheImgCode.length !== 4) return showToast("请输入正确的验证码!");
  //请求服务器存储新用户
  //console.log(paramsObj);
  let res = await reqSaveUser(paramsObj);
  if(res.code === 200){
    showSuccessToast("注册成功,跳转登录...");
    //延时跳转
    setTimeout(() => {
      router.push("/login");
    },800)
  } else {
    showToast("用户名已被使用,请更换!");
  }
  console.log('用户注册api',res);
}

//点击验证码图片更换验证码
let timer:any = null;
function changeCaptcheImg () {
  if(timer !== null) {
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    //请求验证码图片
    getCaptchaImgCode();
  },500)
}
//获取登录验证码
async function getCaptchaImgCode () {
  let res = await reqCaptchaImgCode ();
  let url = "";
  let imageBase64 = ""
  if(res.code === 200) {
    //base64图片验证码获取成功
    if(!res.data.includes("data:image/png;base64,")){
      imageBase64 = "data:image/png;base64," + res.data;
    } else {
      imageBase64 = res.data;
    }
    //url = window.URL.createObjectURL(new Blob([imageBase64],{type:"image/png"}));  //转换成图片地址

    //将base64字符串转换为Blob对象
    let byteCharacters = atob(imageBase64.split(",")[1]);
    let byteNumbers = new Array(byteCharacters.length);
    for (var i = 0; i < byteCharacters.length; i++) {
      byteNumbers[i] = byteCharacters.charCodeAt(i);
    }
    let byteArray = new Uint8Array(byteNumbers);
    let blob = new Blob([byteArray], { type: 'image/png' }); // 根据实际图片格式设置type
    url = URL.createObjectURL(blob);
  }
  registerForm.imageBase64Url = url;
  console.log('图片验证码接口api',res);
  // console.log(imageBase64, url);
}

//vue生命周期
onMounted(() => {
  //获取验证码图片
  getCaptchaImgCode();
})
</script>

<style lang="less" scoped>
.register-page{
  width: 375px;
  height: 100vh;

  .page-content{
    width: 375px;
    height: calc(100vh - 46px);
    position: relative;
    top:47px;
    overflow: scroll;

    /**商城logo部分 */
    .content-logo{
      width: 140px;
      height: 140px;
      margin: 10px auto;
      display: flex;
      justify-content: center;
      .logo-img{
        height: 140px;
      }
    }
    /**登录表单区域 */
    .content-form{
      width: 360px;
      height: 270px;
      margin: 20px auto;
      border-radius: 5px;
      .form-item{
        width: 320px;
        height: 40px;
        padding: 0 5px;
        margin: 15px auto 0 auto;
        box-sizing: border-box;
        border-bottom: 1px solid #ece9e9;
        // background: #efefef;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-input{
          width: 270px;
          height: 30px;
          border: none;
          font-size: 16px;
          color: #9195a3;
          
          &::placeholder{
            font-size: 14px;
            color: #c7c5c5;
          }
        }
      }
      /**表单项-带验证码 */
      .captcha-code{
        width: 320px;
        height: 40px;
        padding: 0 5px;
        margin: 15px auto 0 auto;
        box-sizing: border-box;
        border-bottom: 1px solid #ece9e9;
        // background: #efefef;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-input{
          width: 150px;
          height: 30px;
          border: none;
          font-size: 16px;
          color: #9195a3;
          
          &::placeholder{
            font-size: 14px;
            color: #c7c5c5;
          }
        }
        .item-captcha-code{
          width: 110px;
          height: 30px;
          cursor: pointer;
        }
      }
    }
    /**用户协议及登录按钮区域 */
    .content-login{
      width: 375px;
      margin: 0 auto;
      padding: 10px;
      box-sizing: border-box;
      .login-agreement{
        margin-top: 15px;
        width: 355px;
        height: 15px;
        font-size: 10px;
        color: #c7c5c5;
        .agreement-tip{
          color: #9195a3;
        }
        .agreement-text{
          color: #3b3b3b;
        }
      }
      .login-btn{
        width: 355px;
        .btn-item{
          width: 355px;
          height: 40px;
        }
      }
    }
  }
}
</style>